<template>
  <div class="article-management">
    <div class="page-header">
      <div class="header-left">
        <el-button type="primary" @click="router.push('/')">
          <el-icon><ArrowLeft /></el-icon>
          返回主页
        </el-button>
      </div>
      <div class="header-center">
        <h2>订单管理</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="orderList"
      style="width: 100%"
      border
    >
      <el-table-column label="商品信息" min-width="400">
        <template #default="scope">
          <div class="product-info">
            <el-image 
              :src="scope.row.productImage" 
              fit="cover"
              class="product-image"
            />
            <div class="product-details">
              <div class="product-name">{{ scope.row.productName }}</div>
              <div class="farm-name">{{ scope.row.farmName }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" width="120">
        <template #default="scope">
          ¥{{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" width="120" />
      <el-table-column prop="totalPrice" label="总价" width="120">
        <template #default="scope">
          ¥{{ scope.row.totalPrice }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="买家" width="120" />
      <el-table-column prop="orderDate" label="下单时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.orderDate) }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next"
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const loading = ref(false)
const orderList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取订单列表
const getOrderList = async () => {
  loading.value = true
  console.log('开始获取订单列表，参数:', {
    page: currentPage.value,
    pageSize: pageSize.value
  })
  try {
    const response = await request({
      url: '/api/orders/admin/list',
      method: 'get',
      params: {
        page: currentPage.value,
        pageSize: pageSize.value
      }
    })
    
    console.log('获取订单列表响应:', response)
    
    if (response && Array.isArray(response.records)) {
      console.log('订单数据:', response)
      orderList.value = response.records
      total.value = response.total || response.records.length
      console.log('处理后的订单列表:', orderList.value)
      console.log('总数:', total.value)
    } else {
      console.error('获取订单列表失败，响应格式不正确:', response)
      ElMessage.error('获取订单列表失败')
    }
  } catch (error) {
    console.error('获取订单列表失败，详细错误:', error)
    console.error('错误响应:', error.response)
    ElMessage.error(error?.response?.data?.message || '获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = () => {
  getOrderList()
}

// 处理页码改变
const handleCurrentChange = (page) => {
  currentPage.value = page
  getOrderList()
}

// 处理每页条数改变
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getOrderList()
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  getOrderList()
})
</script>

<style scoped>
.article-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.header-left {
  flex: 1;
}

.header-center {
  flex: 2;
  text-align: center;
}

.header-center h2 {
  margin: 0;
  font-size: 24px;
  color: #409EFF;
}

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-name {
  font-weight: bold;
  color: #303133;
}

.farm-name {
  color: #909399;
  font-size: 14px;
}
</style> 